<!--页面顶部-->
<template>
	<view class="jhj-header">
		<view class="jhj-header-search">
<!-- 			<image class="image-search" src="@/static/image/searchimg.png" />
			<input type="text" placeholder="请输入" placeholder-class="placeholder-input" disabled="false" /> -->
			<u-search placeholder="输入关键字" v-model="val" @search="searchname" @clear="clearname"></u-search>
		</view>
		<u-icon name="list-dot" @click="goSearch" size="34"></u-icon>
		<!-- <view class="jhj-header-menu">
			<view class="jhj-header-menu-item" v-for="(item,index) in list" :key="index" @click="goSortPage(item)">
				<text>{{item.name}}</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				val:''
			}
		},
		mounted() {

		},
		methods: {
			goSearch() {
				this.$emit('search-click');
			},
			goSortPage(item) {
				console.log(item);
				this.$emit('click', item)
			},
			searchname(val){
				// console.log(val);
				this.$emit('getsearchdata',val);
			},
			clearname(){
				this.$emit('clearname');
			}
		}
	}
</script>

<style lang="less" scoped>
	.jhj-header {
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 22rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;

		.jhj-header-search {
			flex: 1;
			margin-right: 40rpx;
			// width: 226rpx;
			height: 60rpx;
			display: flex;
			text-align: left;
			align-items: center;
			u-search{
				width: 100%;
			}

			.image-search {
				width: 44rpx;
				height: 44rpx;
				margin-right: 12rpx;
			}

			&>input {
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}

			.placeholder-input {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
			}
		}

		.jhj-header-menu {
			margin-left: 30rpx;
			width: 394rpx;
			padding: 0rpx 30rpx;
			height: 80rpx;
			background: #EFF0F1;
			border-radius: 40rpx;
			display: flex;
			text-align: center;
			align-items: center;

			.jhj-header-menu-item {
				flex: 0 0 34%;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}
		}
	}
</style>
